<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="man" style="width: 600px;height:360px;"></div>
</body>
<script>
    var ROOT_PATH = 'https://echarts.apache.org/examples';
    var chartDom2 = document.getElementById('man');
var myChart2 = echarts.init(chartDom2);
var option2;

const weatherIcons = {
  Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
  Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
  Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
};
option2 = {
  title: {
    text: '学员地区分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    bottom: 10,
    left: 'center',
    data: ['菏泽', '濮阳', '邓州', '南阳', '河北']
  },
  series: [
    {
      type: 'pie',
      radius: '65%',
      center: ['50%', '50%'],
      selectedMode: 'single',
      data: [
        {
          value: 1,
          name: '河北',
        },
        { value: 2, name: '邓州' },
        { value: 4, name: '南阳' },
        { value: 4, name: '濮阳' },
        { value: 8, name: '菏泽' }
      ],
    }
  ]
};

option2 && myChart2.setOption(option2);
</script>
</html>